import { Avatar, Card, Tabs, TabsProps } from "antd";
// import { useSelector } from "react-redux";
import styles from "./index.module.css"; // 使用CSS Modules

export default function Me() {
  // 模拟用户数据，实际项目中从Redux获取
  // const profile = useSelector((state: any) => state.user.profile) || {
  //   username: "用户名",
  //   avatar: "https://randomuser.me/api/portraits/men/1.jpg",
  //   email: "user@example.com",
  //   joinDate: "2023-01-01",
  //   bio: "这个人很懒，什么都没留下...",
  //   stats: {
  //     posts: 42,
  //     followers: 128,
  //     following: 56,
  //   },
  // };

  const profile = {
    username: "用户名",
    avatar: "https://randomuser.me/api/portraits/men/1.jpg",
    email: "user@example.com",
    joinDate: "2023-01-01",
    bio: "这个人很懒，什么都没留下...",
    stats: {
      posts: 42,
      followers: 128,
      following: 56,
    },
  };

  // 标签页配置
  const tabItems: TabsProps["items"] = [
    {
      key: "1",
      label: "我的帖子",
      children: <div className={styles.tabContent}>这里显示我的帖子列表</div>,
    },
    {
      key: "2",
      label: "收藏",
      children: <div className={styles.tabContent}>这里显示收藏内容</div>,
    },
  ];

  return (
    <div className={styles.meContainer}>
      {/* 用户信息卡片 */}
      <Card className={styles.profileCard}>
        <div className={styles.profileHeader}>
          <Avatar src={profile.avatar} size={100} className={styles.avatar} />
          <div className={styles.profileInfo}>
            <h1 className={styles.username}>{profile.username}</h1>
            <p className={styles.email}>{profile.email}</p>
            <p className={styles.joinDate}>
              加入于 {new Date(profile.joinDate).toLocaleDateString()}
            </p>
          </div>
        </div>

        <p className={styles.bio}>{profile.bio}</p>

        <div className={styles.statsContainer}>
          <div className={styles.statItem}>
            <span className={styles.statNumber}>{profile.stats.posts}</span>
            <span className={styles.statLabel}>帖子</span>
          </div>
          <div className={styles.statItem}>
            <span className={styles.statNumber}>{profile.stats.followers}</span>
            <span className={styles.statLabel}>粉丝</span>
          </div>
          <div className={styles.statItem}>
            <span className={styles.statNumber}>{profile.stats.following}</span>
            <span className={styles.statLabel}>关注</span>
          </div>
        </div>
      </Card>

      {/* 内容标签页 */}
      <div className={styles.contentSection}>
        <Tabs
          defaultActiveKey="1"
          items={tabItems}
          className={styles.tabs}
          tabBarStyle={{ padding: "0 1em" }}
        />
      </div>
    </div>
  );
}
